<template>

    <div>
        <el-breadcrumb separator="/" style="padding: 10px 10px">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">订单管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>订单信息管理</el-breadcrumb-item>
        </el-breadcrumb>


        <el-form ref="form" :model="form" label-width="80px" :inline="true" :label-width="50" label-position="left"
                 style="background-color: #fff; border: 1px solid #EBEEF5;padding: 20px;box-sizing: border-box;margin-bottom: 10px">
            <el-form-item label="输入搜索">
                <el-input v-model="form.name" placeholder="订单编号"></el-input>
            </el-form-item>
            <el-form-item label="收货人">
                <el-input v-model="form.name" placeholder="收货人姓名/手机号码"></el-input>
            </el-form-item>


            <el-form-item label="订单状态">
                <el-select v-model="form.region" placeholder="请选择订单状态">
                    <el-option label="待付款" value="beijing"></el-option>
                    <el-option label="待发货" value="beijing"></el-option>
                    <el-option label="已发货" value="beijing"></el-option>
                    <el-option label="已完成" value="beijing"></el-option>
                    <el-option label="已关闭" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="提交时间">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                                    style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2" style="display: flex;justify-content: center">-</el-col>
                <el-col :span="11">
                    <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                </el-col>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" size="medium" @click="onSubmit">查询</el-button>
                <el-button size="medium">取消</el-button>
            </el-form-item>
        </el-form>

        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="OrderID"
                    label="订单编号"
            >
            </el-table-column>
            <el-table-column
                    prop="refundtype"
                    label="退货类型"
            >
            </el-table-column>
            <el-table-column
                    prop="isreturn"
                    label="是否退货">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="收件人">
            </el-table-column>
            <el-table-column
                    prop="tel"
                    label="联系方式">
            </el-table-column>
            <el-table-column
                    prop="auditstatus"
                    label="审核状态">
            </el-table-column>
            <el-table-column
                    prop="operator"
                    label="操作人">
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="操作时间">
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center">

                <el-button @click="handleClick" type="text" size="small">处理</el-button>
            </el-table-column>
        </el-table>

        <div style="display: flex;justify-content: space-between;margin-top: 10px;">
            <div style="display: flex;justify-content: space-between">
                <el-select v-model="form.region" placeholder="批量操作">
                    <el-option label="批量发货" value="shanghai"></el-option>
                    <el-option label="关闭订单" value="beijing"></el-option>
                    <el-option label="删除订单" value="beijing"></el-option>
                </el-select>
                <el-button>确认</el-button>
            </div>

            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000">
            </el-pagination>

        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [{
                    OrderID: "1001",
                    refundtype: "退货退款",
                    isreturn: "是",
                    name: "张三",
                    tel: "13888889999",
                    auditstatus: "待处理",
                    operator: "李四",
                    time: "2019-7-20",
                }, {
                    OrderID: "1002",
                    refundtype: "退款",
                    isreturn: "否",
                    name: "张三",
                    tel: "13888889999",
                    auditstatus: "审核通过",
                    operator: "李四",
                    time: "2019-7-20",
                }, {
                    OrderID: "1002",
                    refundtype: "退款",
                    isreturn: "否",
                    name: "张三",
                    tel: "13888889999",
                    auditstatus: "审核通过",
                    operator: "李四",
                    time: "2019-7-20",
                }, {
                    OrderID: "1002",
                    refundtype: "退款",
                    isreturn: "否",
                    name: "张三",
                    tel: "13888889999",
                    auditstatus: "审核通过",
                    operator: "李四",
                    time: "2019-7-20",
                }, {
                    OrderID: "1002",
                    refundtype: "退款",
                    isreturn: "否",
                    name: "张三",
                    tel: "13888889999",
                    auditstatus: "审核通过",
                    operator: "李四",
                    time: "2019-7-20",
                }],
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                },
            }
        },
        methods: {
            handleClick() {
                this.$router.push('/home/return_details')
            }
        }
    }
</script>

<style scoped>

</style>